<template>
  <view :style="colorStyle">
    <view
      class="goodsModule"
      :style="{
        paddingTop: `${info.style.pTop * 2}rpx`,
        paddingLeft: `${info.style.pLeft * 2}rpx`,
        paddingRight: `${info.style.pRight * 2}rpx`,
        paddingBottom: `${info.style.pBottom * 2}rpx`,
      }"
    >
      <view
        class="info1"
        :style="{
          marginTop: `${info.style.mTop * 2}rpx`,
          marginLeft: `${info.style.mLeft * 2}rpx`,
          marginRight: `${info.style.mRight * 2}rpx`,
          marginBottom: `${info.style.mBottom * 2}rpx`,
        }"
      >
        <view
          class="list1"
          v-for="(q, index, key) in list"
          @click="gourl(`/pages/goods/detail?id=${q.id}`)"
          v-if="info.type == 1"
          :key="key"
          :style="{
            borderRadius: `${info.radius * 2}rpx`,
            border: `${info.carStyle == 2 ? '1rpx solid #e0e0e0' : 'none'}`,
            boxShadow: `${info.carStyle == 2 ? 'none' : ''}`,
          }"
        >
          <view class="img">
            <image
              :src="q.img"
              class=""
              alt=""
              :style="{ borderRadius: `${info.imgRadius * 2}px` }"
              mode="aspectFill"
            />
            <view class="no-stock" v-if="q.stock <= 0">
              <image
                src="http://xpj40szpt.signalpha.cn/img/img101.png"
                mode="widthFix"
              />
            </view>
          </view>
          <view class="listinfo">
            <view class="title ellipsis2">
              {{ q.name }}
            </view>
            <view class="labelbox flex aitems">
              <view
                class="label"
                v-for="(b, index, key) in q.tagName.split(',')"
                :key="key"
                :style="{ opacity: `${info.label && q.tagName ? 1 : 0}` }"
                >{{ b ? b : "标签" }}</view
              >
            </view>
            <view class="listinfo1 flex aitems between">
              <view class="left flex aitems">
                <view class="unit">￥</view>
                <view class="price">{{ q.goodsPrice }}</view>
              </view>
              <view class="right" v-if="info.zan"
                >销量:{{
                  Number(q.salesVolumeVirtual + q.salesVolume).toFixed(0)
                }}</view
              >
            </view>
          </view>
        </view>
        <view
          class="list2 flex aitems between"
          v-for="(q, index, key) in list"
          @click="gourl(`/pages/goods/detail?id=${q.id}`)"
          :key="key"
          v-if="info.type == 2"
          :style="{
            borderRadius: `${info.radius * 2}rpx`,
            border: `${info.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'}`,
            boxShadow: `${info.carStyle == 2 ? 'none' : ''}`,
          }"
        >
          <view class="sellerbox">
            <view class="sellerList">
              <view class="sellerinfo1 flex">
                <view class="goodsImgbox">
                  <image
                    class="sellerLogo"
                    :src="q.img"
                    alt=""
                    :style="{ borderRadius: `${info.imgRadius * 2}rpx` }"
                    mode="aspectFill"
                  />
                  <view class="no-stock" v-if="q.stock <= 0">
                    <image
                      src="http://xpj40szpt.signalpha.cn/img/img101.png"
                      mode="widthFix"
                    />
                  </view>
                </view>
                <view class="sellerNameBox flex between">
                  <view class="sellerNameBox1">
                    <view class="sellerName ellipsis2">
                      {{ q.name }}
                    </view>
                    <view class="labelbox flex aitems">
                      <view
                        class="label"
                        v-for="(b, index, key) in q.tagName.split(',')"
                        :key="key"
                        :style="{
                          color: `${info.color}`,
                          border: `0.5px solid ${info.color}`,
                          opacity: `${info.label && q.tagName ? 1 : 0}`,
                        }"
                      >
                        {{ b ? b : "标签" }}
                      </view>
                    </view>
                    <view class="sale" v-if="info.zan"
                      >销量:{{
                        Number(q.salesVolumeVirtual + q.salesVolume).toFixed(0)
                      }}</view
                    >
                  </view>
                  <view class="price flex aitems between">
                    <view
                      class="pricebox flex aitems"
                      :style="{ color: `${info.color}` }"
                    >
                      <view class="priceInfo1 flex aitems"
                        ><view class="unit">￥</view>
                        <view class="num">{{ q.goodsPrice }}</view></view
                      >
                      <view class="priceInfo2 flex aitems"
                        ><view class="unit f20">￥</view>
                        <view class="num f28">{{ q.marketPrice }}</view></view
                      >
                    </view>
                    <view class="btn" :style="{ background: `${info.color}` }">
                      立即购买
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view style="height: 24rpx" v-if="info.type == 3"></view>
        <custom-waterfalls-flow
          ref="waterfallsFlowRef"
          :imageKey="'img'"
          :value="list"
          :column="2"
          :columnSpace="1.5"
          :seat="2"
          v-if="info.type == 3"
        >
          <!-- #ifdef MP-WEIXIN -->
          <view
            v-for="(item, index, key) in list"
            :key="index"
            slot="slot{{index}}"
            class="list3"
            @click="gourl(`/pages/goods/detail?id=${item.id}`)"
            :style="{
              borderRadius: `${info.radius * 2}rpx`,
              border: `${info.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'}`,
              boxShadow: `${info.carStyle == 2 ? 'none' : ''}`,
            }"
          >
            <view class="img">
              <image
                :src="item.img"
                class=""
                alt=""
                :style="{ borderRadius: `${info.imgRadius * 2}rpx` }"
                mode="widthFix"
              />
            </view>
            <view class="listinfo">
              <view class="title ellipsis2">
                {{ item.name }}
              </view>
              <view class="labelbox flex aitems">
                <view
                  class="label"
                  v-for="(b, index, key) in item.tagName.split(',')"
                  :key="key"
                  v-if="info.label && item.tagName"
                  >{{ b ? b : "标签" }}</view
                >
              </view>
              <view class="listinfo1 flex aitems between">
                <view class="left flex aitems">
                  <view class="unit">￥</view>
                  <view class="price">{{ item.goodsPrice }}</view>
                </view>
                <view class="right" v-if="info.zan"
                  >销量:{{
                    Number(item.salesVolumeVirtual + item.salesVolume).toFixed(
                      0
                    )
                  }}</view
                >
              </view>
            </view>
          </view>
          <!-- #endif -->

          <!-- #ifndef MP-WEIXIN -->
          <template v-slot:default="q">
            <view class="">
              <view
                class="list3"
                @click="gourl(`/pages/goods/detail?id=${q.id}`)"
                :style="{
                  borderRadius: `${info.radius * 2}rpx`,
                  border: `${
                    info.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'
                  }`,
                  boxShadow: `${info.carStyle == 2 ? 'none' : ''}`,
                }"
              >
                <view class="img">
                  <image
                    :src="q.img"
                    class=""
                    alt=""
                    :style="{ borderRadius: `${info.imgRadius * 2}rpx` }"
                    mode="widthFix"
                  />
                  <view class="no-stock" v-if="q.stock <= 0">
                    <image
                      src="http://xpj40szpt.signalpha.cn/img/img101.png"
                      mode="widthFix"
                    />
                  </view>
                </view>
                <view class="listinfo">
                  <view class="title ellipsis2">
                    {{ q.name }}
                  </view>
                  <view
                    class="labelbox flex aitems"
                    v-if="info.label && q.tagName"
                  >
                    <view
                      class="label"
                      v-for="(b, index, key) in q.tagName.split(',')"
                      :key="key"
                      >{{ b ? b : "标签" }}</view
                    >
                  </view>
                  <view class="listinfo1 flex aitems between">
                    <view class="left flex aitems">
                      <view class="unit">￥</view>
                      <view class="price">{{ q.goodsPrice }}</view>
                    </view>
                    <view class="right" v-if="info.zan"
                      >销量:{{
                        Number(q.salesVolumeVirtual + q.salesVolume).toFixed(0)
                      }}</view
                    >
                  </view>
                </view>
              </view>
            </view>
          </template>
          <!-- #endif -->
        </custom-waterfalls-flow>

        <view class="list4box">
          <view
            class="list4"
            v-for="(q, index, key) in list"
            @click="gourl(`/pages/goods/detail?id=${q.id}`)"
            :key="key"
            v-if="info.type == 4"
            :style="{
              borderRadius: `${info.radius * 2}rpx`,
              border: `${info.carStyle == 2 ? '.5px solid #e0e0e0' : 'none'}`,
              boxShadow: `${info.carStyle == 2 ? 'none' : ''}`,
            }"
          >
            <view class="img">
              <image
                :src="q.img"
                class=""
                alt=""
                :style="{ borderRadius: `${info.imgRadius * 2}rpx` }"
                mode="aspectFill"
              />
              <view class="no-stock" v-if="q.stock <= 0">
                <image
                  src="http://xpj40szpt.signalpha.cn/img/img101.png"
                  mode="widthFix"
                />
              </view>
            </view>
            <view class="listinfo">
              <view class="title ellipsis2">
                {{ q.name }}
              </view>
              <view class="labelbox flex aitems">
                <view
                  class="label"
                  v-for="(b, index, key) in q.tagName.split(',')"
                  :key="key"
                  :style="{ opacity: `${info.label && q.tagName ? 1 : 0}` }"
                  >{{ b ? b : "标签" }}</view
                >
              </view>
              <view class="listinfo1 flex aitems between">
                <view class="left flex aitems">
                  <view class="unit">￥</view>
                  <view class="price">{{ q.goodsPrice }}</view>
                </view>
                <view class="right" v-if="info.zan"
                  >销量:{{
                    Number(q.salesVolumeVirtual + q.salesVolume).toFixed(0)
                  }}</view
                >
              </view>
            </view>
          </view>
        </view>
        <view class="more flex aitems jcenter" v-if="info.more">
          <view class="flex aitems">
            <view>查看更多</view>
            <i class="el-icon-arrow-right"></i>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { goodslistids, goodsPage } from "@/servers/servers";
import colors from "@/mixins/color";
import { HTTP_STATUS } from "../../../servers/config";
import { go, loading } from "../../../utils/wxAPI";
export default {
  mixins: [colors],
  props: {
    info: {
      default: {},
    },
    onReachBottomChange: {
      default: "",
    },
  },
  watch: {
    onReachBottomChange(ref) {
      console.log(ref);
      console.log("----------------------onReachBottomChange");
      if (this.list.length == this.total) return;
      this.current += 1;
      this.handleGoodsPage();
    },
  },
  data() {
    return {
      list: [],
      current: 1,
      total: 0,
    };
  },
  async mounted() {
    if (this.info.ispage == 0) {
      if (this.info.value.length !== 0) {
        this.goodslistids();
      }
    } else {
      this.handleGoodsPage();
    }
  },
  methods: {
    async handleGoodsPage() {
      loading();
      let { data } = await goodsPage({
        current: this.current,
        size: 10,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        list.map((item) => {
          item.hide = 1;
        });
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    async goodslistids() {
      let ids = [];
      this.info.value.map((item) => {
        ids.push(item.id);
      });
      let { data } = await goodslistids({ ids: ids.join(",") });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data;
        list.map((item) => {
          item.hide = 1;
        });
        this.list = list;
      }
    },
    gourl(url) {
      go(url);
    },
    hexToRgb(hex, o) {
      // 移除十六进制颜色中的'#'
      let sanitizedHex = hex.replace("#", "");

      // 解析红、绿、蓝色值
      let r = parseInt(sanitizedHex.substring(0, 2), 16);
      let g = parseInt(sanitizedHex.substring(2, 4), 16);
      let b = parseInt(sanitizedHex.substring(4, 6), 16);

      return `rgb(${r}, ${g}, ${b},${o})`;
    },
  },
};
</script>

<style lang="scss" scoped>
.goodsModule {
  position: relative;
  cursor: move;
  overflow: hidden;

  .info1 {
    position: relative;
    z-index: 1;

    .list1 {
      width: calc(100% - 32rpx);
      margin: 24rpx auto 0;
      padding: 16rpx;
      background: #fff;
      overflow: hidden;
      box-shadow: 0px 8rpx 20rpx 0 rgba(0, 0, 0, 0.06);

      .img {
        width: 100%;
        position: relative;

        image {
          width: 100%;
          height: 520rpx;
          object-fit: cover;
        }
        .no-stock {
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          image {
            width: 70%;
            // height: 70%;
            object-fit: cover;
          }
        }
      }

      .listinfo {
        .title {
          font-size: 28rpx;
          color: #1f1f1f;
          margin-top: 16rpx;
          // height: 200rpx;
        }

        .labelbox {
          flex-wrap: wrap;
          margin: 16rpx 0;

          .label {
            color: var(--view-theme);
            font-size: 22rpx;
            border-radius: 8rpx;
            border: 1rpx solid var(--view-theme);
            margin: 0 8rpx 8rpx 0;
            padding: 4rpx 16rpx;
          }
        }

        .listinfo1 {
          .left {
            color: var(--view-theme);
            font-weight: bold;

            .unit {
              font-size: 28rpx;
              position: relative;
              top: 2rpx;
            }

            .price {
              font-size: 40rpx;
            }
          }

          .right {
            color: #858585;
            font-size: 22rpx;
          }
        }
      }
    }

    .list2 {
      margin: 24rpx 0px 0;
      background: #fff;
      overflow: hidden;
      padding: 16rpx;
      box-shadow: 0px 8rpx 20rpx 0 rgba(0, 0, 0, 0.06);

      .sellerbox {
        width: 100%;

        .sellerList {
          position: relative;
          overflow: hidden;

          .sellerinfo1 {
            position: relative;
            z-index: 1;
            .goodsImgbox {
              position: relative;
              .sellerLogo {
                width: 230rpx;
                height: 230rpx;
                border-radius: 24rpx;
                object-fit: cover;
              }
              .no-stock {
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.6);
                display: flex;
                align-items: center;
                justify-content: center;
                image {
                  width: 90%;
                  // height: 90%;
                  object-fit: cover;
                }
              }
            }
            .sellerNameBox {
              width: calc(100% - 16rpx - 230rpx);
              margin-left: 16rpx;
              flex-direction: column;
              height: 260rpx;

              .sellerName {
                color: #1f1f1f;
                font-size: 28rpx;
              }

              .labelbox {
                flex-wrap: wrap;
                margin: 16rpx 0;

                .label {
                  color: var(--view-theme);
                  font-size: 22rpx;
                  border-radius: 8rpx;
                  border: 1rpx solid var(--view-theme);
                  margin: 0 8rpx 8rpx 0;
                  padding: 4rpx 8rpx;
                }
              }

              .sale {
                color: #858585;
                font-size: 22rpx;
              }

              .price {
                .pricebox {
                  color: var(--view-theme);
                  margin: 24rpx 0 0;
                  font-weight: bold;

                  .priceInfo2 {
                    margin-left: 8rpx;
                    color: #999;
                  }

                  .unit {
                    font-size: 24rpx;
                    position: relative;
                    // top: 2rpx;
                  }

                  .num {
                    font-size: 40rpx;
                  }
                }
              }

              .btn {
                border-radius: 60rpx;
                background: var(--view-theme);
                color: #fff;
                font-size: 24rpx;
                padding: 16rpx 34rpx;
              }
            }
          }
        }
      }
    }

    .list3box {
      flex-wrap: wrap;
    }

    .list3 {
      width: 316rpx;
      // margin: 24rpx 0 0;
      padding: 16rpx;
      background: #fff;
      overflow: hidden;
      box-shadow: 0px 8rpx 40rpx 0 rgba(0, 0, 0, 0.06);

      .img {
        width: 100%;
        position: relative;

        image {
          width: 100%;
          height: 316rpx;
          object-fit: cover;
        }

        .no-stock {
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          image {
            width: 70%;
            // height: 70%;
            object-fit: cover;
          }
        }

        .lable {
          position: absolute;
          bottom: 20rpx;
          left: 20rpx;
          height: 32rpx;

          view {
            color: #fff;
            font-size: 20rpx;
            background: rgba(33, 33, 33, 0.5);
            padding: 0 8rpx;
            height: 32rpx;
            line-height: 32rpx;
            margin: 0 0 0 12rpx;
          }
        }
      }

      .listinfo {
        .title {
          font-size: 28rpx;
          color: #1f1f1f;
          margin-top: 16rpx;
          // height: 200rpx;
        }

        .labelbox {
          flex-wrap: wrap;
          margin: 16rpx 0;

          .label {
            color: var(--view-theme);
            font-size: 22rpx;
            border-radius: 8rpx;
            border: 1rpx solid var(--view-theme);
            margin: 0 8rpx 7rpx 0;
            padding: 4rpx 16rpx;
          }
        }

        .listinfo1 {
          margin: 10rpx 0 0;
          .left {
            color: var(--view-theme);
            font-weight: bold;

            .unit {
              font-size: 28rpx;
              position: relative;
              top: 2rpx;
            }

            .price {
              font-size: 40rpx;
            }
          }

          .right {
            color: #858585;
            font-size: 22rpx;
          }
        }
      }
    }

    .list4box {
      white-space: nowrap;
      overflow-x: scroll;
      margin: 20rpx 0 0;
    }

    .list4box::-webkit-scrollbar {
      display: none;
    }

    .list4 {
      width: 216rpx;
      margin: 0 16rpx 0 0;
      padding: 16rpx;
      background: #fff;
      overflow: hidden;
      box-shadow: 0px 4rpx 20rpx 0 rgba(0, 0, 0, 0.06);
      display: inline-block;

      .img {
        width: 100%;
        position: relative;

        image {
          width: 100%;
          height: 216rpx;
          object-fit: cover;
        }
        .no-stock {
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          image {
            width: 70%;
            // height: 70%;
            object-fit: cover;
          }
        }

        .lable {
          position: absolute;
          bottom: 20rpx;
          left: 20rpx;
          height: 32rpx;

          view {
            color: #fff;
            font-size: 20rpx;
            background: rgba(33, 33, 33, 0.5);
            padding: 0 8rpx;
            height: 32rpx;
            line-height: 132rpx;
            margin: 0 0 0 12rpx;
          }
        }
      }

      .listinfo {
        .title {
          font-size: 28rpx;
          color: #1f1f1f;
          margin-top: 16rpx;
          // height: 200rpx;
        }

        .labelbox {
          flex-wrap: wrap;
          margin: 16rpx 0;

          .label {
            color: var(--view-theme);
            font-size: 20rpx;
            border-radius: 8rpx;
            border: 1rpx solid var(--view-theme);
            margin: 0 8rpx 8rpx 0;
            padding: 4rpx 16rpx;
          }
        }

        .listinfo1 {
          .left {
            color: var(--view-theme);
            font-weight: bold;

            .unit {
              font-size: 20rpx;
              position: relative;
              top: 2rpx;
            }

            .price {
              font-size: 32rpx;
            }
          }

          .right {
            color: #858585;
            font-size: 22rpx;
          }
        }
      }
    }

    .more {
      font-size: 24rpx;
      padding: 120rpx 0;
      color: #999999;
    }
  }
}
</style>
